<!--培养方案查询-->
<template>
  <div class="wrapper-container">
    <div class="search-container"  style="margin:0;padding-left:0">
      <div class="my-form-item-label" id="searchLabel">
        年度：
      </div>
      <el-select v-model="grade" placeholder="请选择" size="mini" style="width:110px;margin-right: 15px;" clearable="">
        <el-option
          v-for="(item,index) in xqList"
          :key="index"
          :label="item.xqszxn"
          :value="item.xqszxn"
        >
        </el-option>
      </el-select>
      <div class="my-form-item-label" id="searchLabel">
        培养层次：
      <!-- <span class="mustW" style="color:red;margin-right:10px">*</span> -->
      </div>
      <el-select v-model="traininglevel" placeholder="请选择" size="mini" style="width:110px;margin-right: 15px;" clearable>
        <el-option
          v-for="(item,index) in pyccList"
          :key="index"
          :label="item.dictValue"
          :value="item.dictKey"
        >
        </el-option>
      </el-select>
      <!-- <el-button type="primary" icon="el-icon-search" @click="reqCheckPlanList" size="mini">查询</el-button> -->
      <div class="search-button" style="margin: 3px 20px 0 5px;" @click="reqCheckList">
        <img src="../../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
    </div>
    <div class="table-container" style="position:relative">
      <el-table
        :data="tableData"
        style="width: 100%"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        <el-table-column label="专业【层次】" align="center" prop="specialtyName">
          <template slot-scope="scope">
            {{ scope.row.specialtyName == '' && scope.row.trainingLevelname == '' ?  '' : scope.row.specialtyName }}【{{ scope.row.trainingLevelname }}】
          </template>
        </el-table-column>
        <el-table-column prop="standardEduSystem" label="学制" align="center">
        </el-table-column>
        <el-table-column
          prop="pyfnDetails"
          label="培养方案【版本】"
          align="center"
        >
          <template slot-scope="scope">
            <button class="xq" @click="changeTable(scope.row)">
              {{scope.row.pyfnDetails}}
            </button>
          </template>
        </el-table-column>
        <el-table-column
          prop="edzxf"
          label="额定总学分"
          align="center"
        >
        <template slot-scope="scope">
          {{scope.row.edzxf}}
        </template>
        </el-table-column>
      </el-table>
      <span class="export-button">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <download-excel
          class="export-btn"
          :data="tableData"
          :fields="jsonFields"
          type="xls"
          name="人才培养方案查询.xls"
          style="color: #f3b815"
        >
          &ensp;导出Excel
        </download-excel>
      </span>
      <div class="block" style="margin-bottom:50px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="pageSize"
          :page-sizes="[5,10,20,50,100, 200]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="width:auto;margin-top: 15px;float:right;margin-bottom:50px;padding:0"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import SelectItem from "../../../components/SelectItem.vue";
import InputItem from "../../../components/InputItem.vue";
import ButtonItem from "../../../components/ButtonItem.vue";
import Subscript from "../../../components/Subscript.vue";
import { trainSearch,reqCheckYearList,reqCheckLevelList } from "@/api/admin1/check";
import { getStore } from '@/util/store.js'

export default {
  components: {
    SelectItem,
    InputItem,
    ButtonItem,
    Subscript,
  },
  data() {
    return {
      roleId:'',
      pageNo: 1,
      pageSize: 5,
      bb:"",
      pyfafl: "",
      pyfaName:"",
      pyfaId:"",
      pyfaList:[],
      importSin:{},
      cc:'',
      total:'',
      checked: false,
      teachingfaculty: "",
      planid: "",
      grade: "",
      xqList: [],
      pc: "第一批",
      pcList: [],
      designcontent: "",
      unitList: [],
      itemType: ["value1"],
      itemTypeList: [
        {
          value: "value1",
          label: "课下作业",
        },
        {
          value: "value2",
          label: "课堂测评",
        },
        {
          value: "value3",
          label: "期中考试",
        },
        {
          value: "value4",
          label: "课终考核",
        },
      ],
      itemTypeObject: {
        value1: "课下作业",
        value2: "课堂测评",
        value3: "期中考试",
        value4: "课终考核",
      },
      traininglevel: "",
      pyccList: [],
      studytype: "",
      typeList: [],
      coursename: "",
      tableData: [],
      multipleSelection: [],
    };
  },
  created() {
    const userInfo = getStore({
      name: "userInfo",
      debug: true,
    }) || {}
    this.roleId = userInfo.content.role_id
  },
  mounted() {
    this.reqCheckYearList();
    this.reqCheckLevelList();
    this.reqCheckList();
  },
  computed: {
    itemTypeLoop() {
      return this.itemType.sort();
      //期中考试（已录/已审
      // qzreview ;
    },
  },
  methods: {
    changeTable(row){
      this.$router.push({
        path: "/admin/training/details", //要跳转的页面的路由
      });
      localStorage.setItem("detaisPyfaid",row.pyfaid);
      localStorage.setItem("detaisPages",'trainSearch');
    },
    //获取年度下拉框
    reqCheckYearList(){
      let that = this;
      reqCheckYearList().then(res => {
        if(res.data.code == 200 && res.data.data){
          that.xqList = res.data.data;
          // that.grade = res.data.data[0].xqszxn;
        }
      });
    },
    //获取培养层次下拉框
    reqCheckLevelList(){
      let that = this;
      reqCheckLevelList().then(res => {
        if(res.data.code == 200 && res.data.data){
          that.pyccList = res.data.data[0].children;
          // that.traininglevel = res.data.data[0].children[0].dictValue;
        }
      });
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.reqCheckList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.reqCheckList();
    },
    //查询
    reqCheckList() {
      this.tableData = [];
      let yearSpecialtyInfo = {
        year: this.grade,
        trainingLevel: this.traininglevel,
        pageNo:this.pageNo,
        pageSize:this.pageSize
      };
      return new Promise(() => {
        if(this.roleId == '1490880728751644674') {
          trainSearch(yearSpecialtyInfo).then((res) => {
            if (res.data.code === 200) {
              this.tableData = res.data.data;
              this.pageNo = 1;
              this.total = res.data.data.length > 0 ? res.data.data[0].tol : '';
              this.tableData.forEach(item=>{
                if(item.trainingProgramInfo) {
                  item.pyfnDetails = item.trainingProgramInfo.mc;
                  item.edzxf = item.trainingProgramInfo.edzxf;
                }
              })
            }
          });
        }
      });
    },
    selChangeSin(index){
      console.log(index)
      this.pyfaId = index;
    },
  }
};
</script>
<style lang="less" scoped>
.export-button {
  margin-top: 15px;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: 120px;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }
.button-group {
    cursor: pointer;
    margin-top: 50px;
    text-align: center;

    > div {
      display: inline-block;
      font-size: 18px;
      padding: 6px 22px;
      border-radius: 6px;

      &:nth-child(1) {
        color: #f3b815;
        border: 1px solid #f3b815;
        background: #fff6ef;
        margin-right: 139px;
      }

      &:nth-child(2) {
        color: #ff3819;
        border: 1px solid #ff3819;
        background: #ffefef;
      }
    }
  }
.search-container {
  justify-content: flex-start !important;
}

.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}

.table-container {
  margin-top: 30px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/special.less";
.search-button {
  width: 77px;
  height: 28px;
  line-height: 28px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  > span {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }
  > img {
    width: 20px;
    height: 20px;
    margin-right: 4px;
  }
}
.cjrc-button {
  height: 28px;
  background: #fff6ef;
  border: 1px solid #f86900;
  border-radius: 6px;
  color: #f86900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.diaInfo{
  color: #004ca7;
  font-size: 16px;
  padding: 10px 40px;
}
.my-form-container {
    width: 1720px;
    height: 879px;
    margin: 20px auto 40px;
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 5px;
    .my-form-item {
      height: 65px;
      border-bottom: 1px solid rgba(0, 76, 167, 0.39);
      margin-bottom: 0;
      > div {
        display: flex;
        height: 100%;
        &:nth-child(2) {
          .my-form-item-label {
            border-left: 1px solid rgba(0, 76, 167, 0.39);
          }
        }
        .my-form-item-label{
          width: 220px;
          padding-left: 60px;
          background: rgba(0, 76, 167, 0.1);
          display: flex;
          flex: none;
          align-items: center;
          color: #004CA7;
          font-size: 16px;
          font-weight: bold;
          border-left: 1px solid rgba(0, 76, 167, 0.39);
          margin-left: -1px;
          .mustW {
            color: red;
          }
        }
      }
    }
  }
#searchLabel{
  line-height: 30px;
  color: #004ca7;
}
.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;

  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}

.table-container5 {
  display: flex;

  .table-data:first-child {
    border-right: none !important;
    border-radius: 9px 0px 0px 9px;
  }

  .table-data:last-child {
    border-radius: 0px 9px 9px 0px;
    border-left: 1px solid #c7d7eb !important;
  }

  .table-data:not(:first-child):not(:last-child) {
    border-right: none !important;
    border-left: 0.8px solid #c7d7eb !important;
    border-radius: 0px !important;
  }

  .table-data {
    min-height: 500px;
  }
}

.table-container ::v-deep .el-table--border .el-table__cell:first-child .cell {
  padding-left: 10px !important;
}

.filter-button1::v-deep .el-radio-button .el-radio-button__inner {
  border-radius: 6px !important;
  border: 1px solid rgb(245, 134, 106);
  color: rgb(245, 134, 106);
  background-color: rgb(254, 237, 226);
}

.filter-button1::v-deep
  .el-radio-button__orig-radio:checked
  + .el-radio-button__inner {
  border: 1px solid rgb(245, 134, 106);
  color: white;
  background-color: rgb(245, 134, 106);
}

.filter-button {
  display: flex;
  margin-top: 27px;
}

.wrapper-container {
  width: 100%;
  margin: 0 auto;
}

.table-container2 {
  .table-data {
    min-height: 500px;
  }

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-container {
  margin-top: 15px;
  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.yy {
  width: 86px;
  height: 28px;
  background: #f1fff8;
  border: 1px solid #02c86c;
  opacity: 1;
  border-radius: 6px;
  line-height: 28px;
  color: #02c86c;
}
.xq {
    height: 28px;
    background: none;
    opacity: 1;
    color: #004ca7;
    padding: 5px 5px;
    line-height: 5px;
    border: none;
}
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
</style>